<!DOCTYPE html>
<html style = "height:100%">
<head>
    <meta charset="utf-8" />
    <title>易吧，开创新的生活</title>
</head>
<link rel="stylesheet" href="css/main.css" type = "text/css">
<link rel="stylesheet" href="css/bootstrap.css" type="text/css">
<link rel="stylesheet" href="css/div.css" type="text/css">
<link rel="stylesheet" href="http://jrain.oscitas.netdna-cdn.com/tutorial/css/fontawesome-all.min.css" />
<script src="js/jquery-1.9.1.min.js"></script>
<script src="js/jquerysession.js"></script>
<script src="js/bootstrap-paginator.min.js"></script>
<script src="js/xs.js"></script>
<?php
include('Server/ConnectMysql.php');
mysqli_query($connect,'SET names UTF8');
?>

<body style = "height:100%">
<nav class = "navbar nav_bar" role = "navigation">
    <div class="webset_info">
        <ul class="contact_phone">
            <li class="phone_ego">
                <i class="phone_icon"></i>
                <span>CONTACT: XXX-XXXX-XXXX</span>
            </li>
            <li class="phone_append">不知道写啥，二手书今天半价？</li>
        </ul>
    </div>
    <!-- 导航栏样式 bootstrap 实现-->
    <div class = "container-fluid" style="margin-top: 20px;">
        <div class="navbar-header logo_container">
            <a class="navbar-left" href="https://github.com/yanguojun123/YB" target="_blank">
                <img class = "logo" alt="Brand" src="image/logo_main.png" height="20">
            </a>
        </div>
        <div class="nav navbar-nav navbar-right loginandreg"  >
            <a id="portrait" style="cursor: pointer"  >
                <li>
                    <img src="../main_page/image/un_logged.png">
                </li>
                <p id="loginandreg_pos">登录</p>
            </a>
        </div>
        <!-- 这里添加登录的弹出框 -->

        <div class="nav navbar-nav navbar-right button_menu">
            <ul class="nav navbar-nav buttons">
                <li class="active"><a href="main.html">功能界面</a></li>
                <li><a href="javascript:void(0);" onclick="jump()">个人主页</a></li>
                <li><a href="#">关注我们</a></li>

            </ul>
        </div>
    </div>

</nav>
<div class = "input-group col-md-3 search_box">
    <!-- 搜索框 -->
    <input type = "text" class="search_input" value="请输入想要查询的内容" onfocus="this.value = '';" onblur="if(this.value == ''){this.value = '请输入想要查询的内容';}">
    <input type="submit" class="search_btn" value="搜索">
</div>
<div class = "main">
    <div class = "container-fluid contain">
        <!-- 容器，用于承载所有需要显示的元件 -->
        <div class="row main_disp_below">
            <!-- 主窗体 -->
            <div class="main_disp_header">
            </div>
            <div class = "main_disp">
                <!-- 界面显示的主体，分为左中右三个 -->
                <div class = "col-md-2 left_select_panel">
                    <!--
                        左边的导航栏，用于显示二手书和失物招领
                    -->
                    <!--
                        左边，这里采用模板的样式，尽量与背景和主体契合，不要选择太深的颜色和太扁平化的侧边栏
                    -->
                    <h3 class="bookClassHeader">二手书相关信息</h3>
                    <ul class="bookCatogries">
                        <li><a id="b1" href="main.html">购买二手书</a></li>
                        <li><a id="b2" href="main.html">发布二手书</a></li>
                        <li><a id="b3" href="main.html">搜索二手书</a></li>
                    </ul>
                    <h3 class="swapClassHeader">失物招领信息</h3>
                    <ul class="swapCatogries">
                        <li><a id="s1" href="ShiWuZhaoling.html?lost_or_pick=lost" >失物信息</a></li>
                        <li><a id="s2" href="ShiWuZhaoling.html?lost_or_pick=pick" >招领信息</a></li>
                        <li><a id="s3" href="AddXinxi.html">免费发布信息</a></li>
                        <li><a id="s4" href="Search.html">搜索信息</a></li>
                    </ul>
                    <div class="moreInfo">
                    </div>
                </div>
                <div class = "col-md-7 mid_main_panel">
                     <div id="content" class="content">
                         <?php
                         $lost_or_pick=$_GET["lost_or_pick"];
                         $count=0;
                         if($lost_or_pick=="lost"){
                             $query="select title,Picture1,lostPropertyId from lostproperty  order by releaseTime DESC ";
                         }
                         else if($lost_or_pick=="pick"){
                             $query="select title,Picture1,pickedPropertyId from pickedproperty  order by releaseTime DESC";
                         }
                         $result_shiwushow=mysqli_query($connect,$query);
                         while($count<4) {
                             $row_shiwushow=mysqli_fetch_row($result_shiwushow);
                             ?>
                        <div class="subcontent">
                            <div class="subcon_photo" align="center">
                                <a href="ShiWuPage.html?id=<?php echo $row_shiwushow[2];?>&lost_or_pick=<?php echo $lost_or_pick;?>">
                                    <img  width="100" height="200" src="data:image/jpg;base64,<?= base64_encode($row_shiwushow[1]) ?>">
                                </a>
                            </div>
                            <div title="标题" align="center"   style="margin-left:10%;weight:100%;">
                                <a href="ShiWuPage.html?id=<?php echo $row_shiwushow[2];?>&lost_or_pick=<?php echo $lost_or_pick;?>"
                                   style="font-size:15px;
                                             text-decoration:none;" ><?php echo $row_shiwushow[0];?></a>
                            </div>
                        </div>
                            <?php
                       $count++;
                        }
                    ?>

                    </div>
							<div id="page" style="margin-left:15%;height:20%;float:left">
<!--							<ul class="pagination"></ul>-->
								<ul id="example"></ul>	
							</div>
              <div id="pageinput"><input type="text" id="pinput" autofocus class="form-control"></div>
              <div id="pagebutton"><button id="pbutton"type="button" class="btn btn-info btn-sm">go</button></div>     
                </div>
                <div class = "col-md-3 right_info_panel">
                          <h2 class="rightheader">热度最高</h2>
                          <ul id="heat">
                            <li><span id="right1"></span><a>三体</a></li>
                          </ul>
                    <!--
                    右边的显示，内容根据左边的选择进行变动；
                    当左侧选择的是二手书相关，右侧显示最火热的二手书；
                    当左侧选择的是失物招领相关，右侧显示（不知道显示什么，说不定可以关掉？估计关掉很难看）
                    -->
                </div>
            </div>
        </div>
    </div>
</div>
<div class = "foot">
    <!-- 角注，呈现版权信息、公司团队信息等 -->
    <div class="container-fluid foot_container">
        <div class="footer-grid foot_panel_1 shrink">
            <h3>完全不知道应该写什么</h3>
            <ul class="foot_list">
                <li><a href="#">项目一</a></li>
                <li><a href="#">项目二</a></li>
                <li><a href="#">项目三</a></li>
                <li><a href="#">项目四</a></li>
            </ul>
        </div>
        <div class="footer-grid foot_panel_2 shrink">
            <h3>第二栏的标题</h3>
            <ul class="foot_list">
                <li><a href="#">项目一</a></li>
                <li><a href="#">项目二</a></li>
                <li><a href="#">项目三</a></li>
                <li><a href="#">项目四</a></li>
            </ul>
        </div>
        <div class="footer-grid foot_panel_3 shrink">
            <h3>第三栏的标题</h3>
            <ul class="foot_list">
                <li><a href="#">项目一</a></li>
                <li><a href="#">项目二</a></li>
                <li><a href="#">项目三</a></li>
                <li><a href="#">项目四</a></li>
                <li><a href="#">项目五</a></li>
            </ul>
        </div>
        <div class="footer-grid foot_panel_4 shrink">
            <h3>第四栏的标题</h3>
            <ul class="foot_list">
                <li><a href="#">项目一</a></li>
                <li><a href="#">项目二</a></li>
            </ul>
        </div>
        <div class="footer-grid foot_panel_5 shrink">
            <h3>第五栏的标题</h3>
            <ul class="foot_list">
                <li><a href="#">项目一</a></li>
                <li><a href="#">项目二</a></li>
                <li><a href="#">项目三</a></li>
            </ul>
        </div>
    </div>
    <div class="foot_license">
        Copyright © 2019.Company name All rights reserved.More Templates 模板之家 - Collect from 网页模板(没错我故意的，嘿嘿)
    </div>
</div>

<div id="login_window">
    <div id="login_window_container">
        <div class="login_input">
            <input type="text" id="logInput1" onfocus="this.value='';" onblur="inputInfo1(this.id)" name="account" value="account">
        </div>
        <div class="login_input">
            <input type="password" id="logInput2"
                   onfocus="this.value='';" onblur="inputInfo2(this.id)"
                   name="passwd" value="password">
        </div>
        <div id="btns">
            <button onclick="login()">Login</button>
            <button onclick="registerBTN()">Register</button>
        </div>
    </div>
</div>
<div id="grayBackground">

</div>
<div id="register_window">
    <div id="register_window_container">
        <!-- 这里的东西就多了，先写着吧 -->
        <div id="registerHeader">
            <h2>新用户注册</h2>
        </div>
        <div id="regisSpan">
            <h4>您的注册 ID 为: <span id="registerID">123456789</span></h4>
        </div>
        <div id="registerInputs">
            <div id="regisNickname">
                <input type="text" placeholder="请输入您的昵称">
            </div>
            <div id="regisEmail">
                <input type="text" placeholder="请输入注册邮箱" onblur="verifyEmail(this)">
            </div>
            <div id="regisPasswd">
                <input type="password" placeholder="请输入密码" onblur="verifyPasswd(this)">
            </div>
            <div id="regisPasswdAgain">
                <input type="password" placeholder="请再次确认密码">
            </div>
        </div>
        <div id="registerButtons">
            <button>注册</button>
            <button onclick="register_cancel()">取消</button>
        </div>
    </div>
</div>

</body>

<script>
<?php
if($lost_or_pick=="lost"){
?>

  for(let i=1;i<=3;i++)
    $("#b"+i).css({"font-size":"10px","color":"black"});
  for(let i=1;i<=4;i++)
    $("#s"+i).css({"font-size":"10px","color":"black"});
  $("#s1").css({"font-size":"20px","color":"red"});
<?php
}
else{
?> 
  for(let i=1;i<=3;i++)
    $("#b"+i).css({"font-size":"10px","color":"black"});
  for(let i=1;i<=4;i++)
    $("#s"+i).css({"font-size":"10px","color":"black"});
  $("#s2").css({"font-size":"20px","color":"red"});
  
<?php
}
?>
var total=20;
//从数据库异步获取最新热度的内容展示到右侧面板
function rightget(){
  $("#heat").empty();
  for(let i=0;i<6;i++){
    $("#heat").append("<li id='right"+i+"'><span><a>信"+i+"</a></span></li>");
    $("#right"+i+"").xs999(Math.round(Math.random()*30));
    $("#right"+i+"").hover(function(){
      $(this).children().children().css({"font-size":"28px","color":"#2bae85","transition":"0.2s"});
    },function(){
      $(this).children().children().css({"font-size":"18px","color":"#ffffff"});
    });
    $("#right"+i+"").click(function(){
      alert($(this).children().children().text())
    });
  }

  
}	 
//分页参数设置函数
function setoptions(totalpages,currentpage,data){
      var options={
        bootstrapMajorVersion:3,
        currentPage: currentpage,
        totalPages: totalpages,
        numberOfPages: 5,
        shouldShowPage:function(type, page, current){
            switch (type) {
                case "first":
                    return true;
                case "prev":
                    return true;
                case "next":
                    return true;
                case "last":
                    return true;
                case "page":
                    return true;
            }
        },
        tooltipTitles: function(type, page, current) {//设置操作按钮的title属性。
            switch (type) {
                case "first":
                    return "首页";
                case "prev":
                    return "上一页";
                case "next":
                    return "下一页";
                case "last":
                    return "末页";
                case "page":
                    return page;
            }
        },
        itemTexts : function(type, page, current) {//控制每个操作按钮的显示文字。
            switch (type) {
                case "first":
                    return "首页";
                case "prev":
                    return "上一页";
                case "next":
                    return "下一页";
                case "last":
                    return "末页";
                case "page":
                    return page;
            }
        },
        onPageChanged: function (event, oldPage, newPage){
          alert(newPage)
          if(newPage==5){
            total=11;
            $('#example').bootstrapPaginator("setOptions",setoptions(11,newPage,""))
          }


          //middleget(newPage);

//              $.ajax({
//                url: '../../interface/xw_zxdt_list.php',
//                type: 'post',
//                data: {page: page},
//                dataType: 'json',
//                success: function (data) {
//                 //tplData(data);//处理成功返回的数据
//                  //传过来一页的数据，总页数
//                  //如果总页数不变则不调用setpages
//                  //否则调用setpages
//              }

        }
    };
    return options;
}
function setpage(){
    $("#example").bootstrapPaginator(setoptions(total,1,"")); 
    $("#pbutton").click(function(){
      let page=$("#pinput").val();
      let reg=/^[0-9]*$/;
      if(page){
        //如果获取到了非空
        if(reg.test(page)){
          if(page>total)
            alert("页数过大")
          else
            $('#example').bootstrapPaginator("show",page)// 调用show命令
        }
        else
          alert("输入不合法")
      }
      else
        alert("你没有输入")
      $("#pinput").val("");

    })
}
setpage();
rightget();
  let tuser=sessionStorage.getItem("user");
  if(tuser==null){
    console.log("未登录")
  }
  else{
    console.log("登录",tuser)
  }
  function jump(){
  console.log("hh");
  var user=$.session.get("user");
  user=JSON.parse(user);
  //console.log(user.userId)
  window.location.href=("../personal_page/chat_html/Personal_index.html?userid="+user.userId);
}
</script>
<script src="js/main.js"></script>
</html>
